$singlecolumn-max-width: ($card-width-slim + $gap * 2);
$dualcolumn-slim-max-width: ($card-width-slim * 2 + $gap * 2);
$scrollbar-offset: 20px;

@mixin tree-node-with-details-container() {
  .container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;

    &::ng-deep table tbody tr {
      cursor: pointer;

      &.expanded {
        background-color: var(--hover-bg);
        color: var(--fg2);

        td:first-child::before {
          background-color: var(--primary);
          content: '';
          height: 100%;
          left: 0;
          opacity: 1;
          position: absolute;
          top: 0;
          width: 6px;
        }
      }
    }
  }

  .details-container {
    &::ng-deep table tbody tr {
      &.expanded {
        background-color: initial;

        td:first-child::before {
          background-color: initial;
          content: none;
        }
      }
    }
  }

  .details-container {
    color: var(--fg2);
    display: flex;
    flex: 1;
    min-width: inherit;
    overflow: hidden;
    padding: 0;
    position: sticky;
    top: 0;

    // Hide Details
    @media (max-width: $breakpoint-hidden) {
      display: none;
    }

    // One Card Column
    @media (min-width: $breakpoint-singlecolumn) and (max-width: calc($breakpoint-dualcolumn-slim - 1px)) {
      max-width: $singlecolumn-max-width;
    }

    // Two Cards Columns
    @media (min-width: $breakpoint-dualcolumn-slim) and (max-width: calc($breakpoint-dualcolumn - 1px)) {
      max-width: ($dualcolumn-slim-max-width + $scrollbar-offset);
    }

    // Two Cards Columns
    @media (min-width: $breakpoint-dualcolumn) {
      max-width: 70%;
    }
  }

  .item-search {
    background-color: var(--bg2);
    padding: 16px;
    position: sticky;
    top: -16.5px;
    z-index: 2;
  }

  .details-container.details-container-mobile {
    // Hide Details
    @media (max-width: $breakpoint-hidden) {
      background: var(--bg1);
      display: flex;
      height: 100% !important;
      left: 0;
      max-width: 100%;
      padding-top: 24px;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 3;
    }

    @media (max-width: $breakpoint-tablet) {
      display: block;
      overflow-y: auto;
      padding-bottom: 96px;
    }

    ::ng-deep .header h3.title {
      width: calc(100% - 16px);

      @media(max-width: $breakpoint-tablet) {
        width: 100%;
      }
    }

    ::ng-deep .cards .scroll-window {
      display: inline-table;
      width: 100%;
    }

    ix-dataset-details-panel {
      margin-top: -12px;
    }
  }

  .loader-bar {
    height: 2px;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 3;
  }

  .spacer {
    display: block;
    flex-grow: 0;
    width: 40px;
  }

  .tree-header {
    align-items: center;
    background: var(--bg1);
    border-bottom: 2px solid var(--lines);
    color: var(--fg2);
    display: grid;
    grid-gap: 8px;
    grid-template-columns: auto 125px 125px 125px 40px;
    min-height: 40px;
    min-width: fit-content;
    min-width: 100%;
    padding-left: 25px;
    width: 100%;

    @media (max-width: $breakpoint-tablet) {
      grid-template-columns: auto 0 0 0 0;
      width: auto;
    }

    @media (min-width: $breakpoint-singlecolumn) {
      grid-template-columns: auto 125px 125px 125px;
    }

    > div {
      font-weight: bold;
      padding: 4px 0;

      @media (max-width: $breakpoint-tablet) {
        display: none;
      }

      &:first-child {
        left: 0;
        position: sticky;

        @media (max-width: $breakpoint-tablet) {
          display: block;
        }
      }
    }
  }

  .sticky-header {
    overflow: hidden;
    position: sticky;
    top: 51px;
    z-index: 1;
  }

  .name-header {
    align-items: center;
    background: linear-gradient(90deg, var(--bg1) 0%, var(--bg1) 0, transparent 80%);
    display: flex;
    left: 15px;
    padding-left: 15px;
    padding-right: 0;
    position: sticky;
  }

  .tree-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: auto;
  }

  .tree-inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: fit-content;

    &::ng-deep {
      .cell-name {
        align-items: stretch;
        font-weight: bold;
        margin: 0;
        padding: 0;

        .icon-container {
          align-items: center;
          display: flex;
        }

        .name {
          align-items: center;
          display: inline-flex;
          max-width: calc(100vw - 80vw);
          overflow: hidden;
          padding-right: 15px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    @media (max-width: $breakpoint-tablet) {
      min-height: fit-content;
      min-width: unset;
      overflow-x: auto;
    }
  }

  ix-tree-node {
    color: var(--fg1);
  }

  .nested-tree-root-node {
    align-items: center;
    border-bottom: 1px solid var(--lines);
    cursor: pointer;
    display: flex;
    min-width: fit-content;
    position: relative;

    &:hover {
      background-color: var(--hover-bg);
    }

    &.selected {
      background-color: var(--hover-bg);
      color: var(--fg2);

      &::before {
        background-color: var(--primary);
        content: '';
        height: 100%;
        left: 0;
        opacity: 1;
        position: absolute;
        top: 0;
        width: 6px;
      }
    }
  }

  .nested-tree-root-node ix-icon.mobile-actions,
  .ix-tree-node ix-icon.mobile-actions,
  .ix-nested-tree-node ix-icon.mobile-actions {
    display: none;

    @media (max-width: $breakpoint-hidden) {
      display: flex;
      margin: 4px 12px;
      position: relative;
      right: 8px;
    }
  }

  .table-container {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    max-width: $table-width;
    min-width: $table-min-width;
    position: relative;

    // Hide Details and stop compressing table width
    @media (min-width: $breakpoint-min-mobile) and (max-width: $breakpoint-tablet) {
      margin-right: unset;
      min-width: $breakpoint-min-mobile;
      width: 100%;
    }

    // Hide Details and stretch table
    @media (min-width: $breakpoint-tablet) and (max-width: $breakpoint-hidden) {
      margin-right: unset;
      min-width: 100%;
    }

    // One Cards Column
    @media (min-width: $breakpoint-singlecolumn) and (max-width: calc($breakpoint-dualcolumn-slim - 1px)) {
      max-width: calc(100% - $singlecolumn-max-width - 16px);
      min-width: calc($table-min-width + 0px);
    }

    // Two Cards Slim Columns
    @media (min-width: $breakpoint-dualcolumn-slim) and (max-width: calc($breakpoint-dualcolumn - 1px)) {
      max-width: calc(100% - $dualcolumn-slim-max-width - 16px - $scrollbar-offset);
      min-width: calc($table-min-width + 0px);
    }

    // Two Cards Columns
    @media (min-width: $breakpoint-dualcolumn) and (max-width: calc($breakpoint-flex - 1px)) {
      min-width: calc(98% - 2 * ($card-width + $gap));
    }

    // Three Cards Columns
    @media (min-width: $breakpoint-triplecolumn) and (max-width: calc($breakpoint-flex - 1px)) {
      min-width: calc(98% - 3 * ($card-width + $gap));
    }

    // Cards spill to the right
    @media (min-width: $breakpoint-flex) {
      max-width: 1200px;
      width: 50%;
    }
  }
}
